import React from 'react'
import {Row, Col, Menu, Dropdown, DatePicker,  Button, } from 'antd';

import {DownOutlined} from '@ant-design/icons';
import './DistributionTask.css'

const {RangePicker} = DatePicker;
const menu = (
    <Menu>
        <Menu.Item>
            <a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">
                下单时间
            </a>
        </Menu.Item>
        <Menu.Item>
            <a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/">
               交货时间
            </a>
        </Menu.Item>
    </Menu>
);

function onChange(value, dateString) {
    console.log('Selected Time: ', value);
    console.log('Formatted Selected Time: ', dateString);
}

function onOk(value) {
    console.log('onOk: ', value);
}

const columns = [
    {
        title: '订单号',
        dataIndex: 'orderNo',
    },
    {
        title: '下单时间',
        dataIndex: 'orderTime',
        sorter: (a, b) => a.age - b.age,
    },
    {
        title: '客户名称',
        dataIndex: 'customerName',
        sorter: (a, b) => a.age - b.age,

    },
    {
        title: '金额',
        dataIndex: 'money',
    },
    {
        title: '出库/发货',
        dataIndex: 'outOfStock',
    },
    {
        title: '状态',
        dataIndex: 'state',
    },
    {
        title: '收款状态',
        dataIndex: 'moneyState',
    },
    {
        title: '操作',
        key: 'action',
        render: () => (
            <span>
        <span style={{marginRight: 16}}>. . .</span>

      </span>
        ),
    },
];
const data = [];
for (let i = 1; i <= 10; i++) {
    data.push({
        key: i,
        name: 'John Brown',
        age: `${i}2`,
        address: `New York No. ${i} Lake Park`,
        description: `My name is John Brown, I am ${i}2 years old, living in New York No. ${i} Lake Park.`,
    });
}

class DistributionTask extends React.Component {
    constructor(props) {
        super(props)
        this.state = {}
    }

    render() {

        const {xScroll, yScroll, ...state} = this.state;

        const scroll = {};
        if (yScroll) {
            scroll.y = 240;
        }
        if (xScroll) {
            scroll.x = '100vw';
        }

        const tableColumns = columns.map(item => ({...item, ellipsis: state.ellipsis}));
        if (xScroll === 'fixed') {
            tableColumns[0].fixed = true;
            tableColumns[tableColumns.length - 1].fixed = 'right';
        }
        return (
            <div style={{padding: 10}}>
                <Row align='middle' style={{borderBottom:'1px solid lightgray'}}>
                    <Col span={2}>
                        <Dropdown overlay={menu}>
                            <a className="dropdownItem" href={'true'} onClick={e => e.preventDefault()}>
                                下单时间 <DownOutlined/>
                            </a>
                        </Dropdown>
                    </Col>
                    <Col span={6}>
                        <RangePicker
                            showTime={{format: 'HH:mm'}}
                            format="YYYY-MM-DD HH:mm"
                            onChange={onChange}
                            placeholder={['起始时间', '结束时间']}
                            onOk={onOk}
                        />
                    </Col>
                    <Col span={7} offset={1}>
                        <Row>
                        <Col span={6}>下单合计：</Col>
                        <Col span={6}>客户数 <span style={{color:'black'}}>0</span></Col>
                        <Col span={6}>配送任务 <span style={{color:'black'}}>0</span></Col>
                            <Col span={6}>收款金额 <span style={{color:'black'}}>0.00</span></Col>
                    </Row>
                        <Row>
                            <Col span={6}>任务合计：</Col>
                            <Col span={6}>待分配 <span style={{color:'#03B8CC'}}>0</span></Col>
                            <Col span={6}>已分配 <span style={{color:'#03B8CC'}}>0</span></Col>
                            <Col span={6}>已完成 <span style={{color:'#03B8CC'}}>0</span></Col>
                        </Row>
                    </Col>
                    <Col span={6} offset={2} align='right'>
                        <Button style={{marginLeft: 20, borderRadius: 4}}>地图模式</Button>
                        <Button style={{
                            marginLeft: 20,
                            borderRadius: 4,
                            backgroundColor: '#12C09F',
                            color: 'white'
                        }}>分配任务</Button>
                    </Col>

                </Row>
                <Row style={{marginTop: 10,minHeight:'25rem'}} align='middle'>
                    <Col align='center' span={24}>您还未给司机分配配送任务，点击前往 <a href={'true'}>分配任务</a>    </Col>
                </Row>
            </div>

        )
    }
}

export default DistributionTask